<template>
  <div class="questions">
    <!-- 头部 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="city" ref="item">
        <template #title>
          <div class="title">
            面试宝典 <small>{{ city }}</small>
          </div>
        </template>
        <template>
          <van-index-bar v-for="(value, key) in cityList" :key="key">
            <van-index-anchor :index="key" />
            <van-cell
              :title="item"
              v-for="(item, index) in value"
              :key="index"
              @click="changeCity(item)"
            />
          </van-index-bar>
        </template>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- 标签 -->
    <div class="tags">
      <span
        @click="getactive(index)"
        v-for="(item, index) in positionList"
        :key="index"
        :class="{ active: active === index }"
        >{{ item.name }}</span
      >
    </div>
    <!-- 刷题数据 -->
    <div class="quesData">
      <div class="item error">
        <i class="iconfont iconicon_mine_cuoti"></i>
        <span>常错题库</span>
      </div>
      <div class="item collect">
        <i class="iconfont iconicon_mine_tikushoucang"></i>
        <span>收藏题库</span>
      </div>
      <div class="item company">
        <i class="iconfont iconicon_mine_qiyeshoucang"></i>
        <span>企业题库</span>
      </div>
      <div class="item answer">
        <i class="iconfont iconicon_mine_mianjing"></i>
        <span>已答题库</span>
      </div>
      <van-circle
        v-model="currentRate"
        :rate="rate"
        :speed="100"
        layer-color="transparent"
        :color="gradientColor"
        stroke-width="50"
      >
        <template>
          <div class="inner">
            <div>
              顺序刷题
            </div>
            <div class="num">
              {{ correctQuestions }} /
              {{ totalCount }}
            </div>
          </div>
        </template>
      </van-circle>
    </div>
    <!-- 累计收录 -->
    <div class="num-box">
      <p>累计收录</p>
      <div class="num">{{ totalCount }}</div>
    </div>
    <!-- 模拟面试 -->
    <div class="btn" @click="goInterview">
      模拟面试
    </div>
  </div>
</template>

<script>
import { apiGetFilters } from '@/api/questions.js'
export default {
  computed: {
    rate: function () {
      if (this.correctQuestions !== 0 && this.totalCount !== 0) {
        return ((this.correctQuestions / this.totalCount) * 100).toFixed(0)
      } else {
        return 0
      }
    }
  },
  data () {
    return {
      active: 0,
      // 当前进度
      currentRate: 0,

      // 进度条颜色
      gradientColor: {
        '0%': '#E401374D',
        '100%': '#E40137B3'
      },

      // 城市数据
      cityPosition: {},
      cityList: {},
      // 标签列表
      positionList: [],
      city: '全国',
      // 总题数
      totalCount: 0,
      // 已答题数
      correctQuestions: this.$store.state.userInfo.correctQuestions.length
    }
  },
  watch: {
    city: function () {
      this.positionList = this.cityPosition[this.city]
    }
  },
  methods: {
    async getFilters () {
      const res = await apiGetFilters()
      console.log(res)
      // 城市数据
      this.cityPosition = res.data.cityPositions
      this.cityList = res.data.citys
      // 标签列表
      this.positionList = this.cityPosition[this.city]
      // 总答题
      this.totalCount = res.data.totalCount
    },
    // 选择城市
    changeCity (item) {
      // 标签默认选择
      this.active = 0
      this.city = item
      this.$refs.item.toggle()
    },
    // 选择tag标签
    getactive (index) {
      this.active = index
    },
    // 去面试
    goInterview () {
      this.$router.push(
        `/interview?type=${this.positionList[this.active].id}&city=${this.city}`
      )
    }
  },
  created () {
    this.getFilters()
  }
}
</script>

<style lang="less" scoped>
.questions {
  font-size: 12px;
  /deep/ .title {
    font-size: 18px;
    font-weight: 600;
    color: #222222;
    /deep/ small {
      font-size: 12px;
      color: #545671;
      font-weight: 400;
    }
  }
  /deep/ .van-index-anchor {
    background: #f7f4f5;
    color: #939393;
  }
  .tags {
    font-size: 12px;
    display: flex;
    overflow: scroll;
    padding: 10px 15px;
    background: #fff;
    &::-webkit-scrollbar {
      display: none;
    }
    span {
      flex-shrink: 0;
      background: #f7f4f5;
      padding: 10px;
      margin-right: 20px;
      border-radius: 16px;
      color: #545671;
    }
  }
  .quesData {
    height: 200px;

    background: #fff;
    margin-top: 15px;
    position: relative;
    .item {
      position: absolute;
      i {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
      }
      span {
        display: block;
        margin-top: 6px;
        color: #545671;
      }
    }
    .error {
      top: 20px;
      left: 20px;
      i {
        background: linear-gradient(180deg, #ff8080, #ff4949);
      }
    }
    .collect {
      top: 20px;
      right: 20px;
      i {
        background: linear-gradient(180deg, #ffda05, #ffb302);
      }
    }
    .company {
      bottom: 20px;
      left: 20px;
      i {
        background: linear-gradient(180deg, #00ddec, #00b8d4);
      }
    }
    .answer {
      bottom: 20px;
      right: 20px;
      i {
        background: linear-gradient(180deg, #3ee5b1, #1dc779);
      }
    }
    /deep/ .van-circle {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: url('../../../assets/circleBg.dac5fdf3.png');
      background-size: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      .inner {
        background: linear-gradient(180deg, #ff6f92, #e40137);
        width: 89%;
        height: 89%;
        border-radius: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        .num {
          margin-top: 10px;
        }
      }
    }
  }
  .num-box {
    background: #fff;
    text-align: center;
    box-sizing: border-box;
    padding: 20px 0;
    margin-top: 15px;
    height: 130px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    p {
      font-size: 18px;
      color: #545671;
    }
    .num {
      font-size: 30px;
    }
  }
  .btn {
    height: 50px;
    background: #00b8d4;
    border-radius: 7px;
    text-align: center;
    line-height: 50px;
    color: #fff;
    font-size: 18px;
    margin: 15px;
  }
  .active {
    background: #00b8d4 !important;
    color: #fff !important;
  }
}
</style>
